<!DOCTYPE html>
<html>

{include file='public/header'}

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">用户管理</a>
            <a><cite>黑名单列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">时间：</label>
                    <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" autocomplete="off" name="start_date" id="start_date" class="layui-input"
                                placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="end_date" id="end_date" class="layui-input"
                                placeholder="结束日期">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">用户ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="uid" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">手机号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="user" lay-filter="user"></table>
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="cancel">取消拉黑</a>
    </script>
    <script>
        let params = {
            elem: '#user'
            , toolbar: '#toolbarDemo'
            , url: '/admin/black/list' //数据接口
            , id: 'user'
            , page: true
            , limit: 15
            , cols: [[ //表头
                { field: 'create_time', title: '时间', align: 'center' }
                , { field: 'uid', title: '用户ID', align: 'center'}
                , { field: 'phone', title: '手机号', align: 'center' }
                , { field: 'reason', title: '拉黑原因', align: 'center' }
                , { toolbar: '#tbBar', title: '操作', width: 200, align: 'center' }
            ]],
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code == 200) {
                    return {
                        "data": res.data.data, //解析数据列表
                        "code": res.code, //解析接口状态
                        'count': res.data.total_count//解析数据长度
                    };
                } else {
                    layer.msg(res.message, { icon: 5, time: 1000 });
                    return {
                        "data": [], //解析数据列表
                        "code": 200, //解析接口状态
                        'count': 0//解析数据长度
                    };
                }
            },
        }
        tableList(params)

        layui.use(['table','laydate'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            table.on('tool(user)', function (obj) {
                var event = obj.event;
                if (event === 'cancel') {
                    AnyAjax('确认要解除拉黑吗？','/admin/black/cancelUserBlack',{ uid: obj.data.uid },'user')
                }
            });
            //日期范围
            laydate.render({
                elem: '#time'
                , range: ['#start_date', '#end_date']
                , format: 'yyyy-MM-dd'
            });
        });
    </script>
</body>

</html>